<template>
  <div>
    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  >
      <el-table-column  label="用户名" width="200">
        <template slot-scope="scope">
          <div>{{scope.row.substring(scope.row.indexOf('-')+1)}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作"  width="200" align="center">
        <template slot-scope="scope">
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row)"
          >
            <el-button type="warning" slot="reference">移除 <i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  name: "Restricted",
  data(){
    return{
      tableData:[]
    }
  },
  created() {
    this.getAll()
  },
  methods:{
    del(row){
      this.request.delete("/user/remove/"+row).then(res => {
        if(res.code === '0'){
          this.$message.success("移除成功")
          this.getAll()
        }else{
          this.$message.error("移除失败")
        }
      })
    },
    getAll(){
      this.request.get("/user/restrictions").then(res => {
        this.tableData = res.data
      })
    }
  }
}
</script>

<style scoped>

</style>